<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>活动管理-活动报名信息</title>
	<%@include file="/public/head-tag.jsp" %>
	<style>
	.item-toolbar {
	    padding: 5px 5px 20px;
	    border-bottom: 1px solid #E2E2E2;
	    margin: 0 0 10px;
	}
	.toolbar-title{
		font-size:16px;
		font-weight:700;
	}
	.toolbar-info {
	    margin-top: 5px;
	    color: #737373;
	}
	.toolbar-info {
	    margin-top: 5px;
	    color: #737373;
	}
	.toolbar-info b {
	    font-family: verdana,tahoma,arial;
	}
	
	
	.action-fields dt,.action-fields dd {
	    display: inline;
	}
	
	.action-fields {
	    margin-top: 5px;
	}
	
	.action-fields dd {
	    margin-right: 5px;
	}
	
	.action-fields dt {
	    color: #504F4F;
	}
	</style>
</head>
<body>
     <%@include file="/public/header.jsp" %>
    
    <section class="container">
		<c:set var="sidebar" scope="request" value="content"/>
		    <c:set var="navbar" scope="request" value="activity"/>
		    <c:import url="/public/sidebar.jsp"/>
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">
    				 <div class="bread">
    					<a href="/Manager/web/action/listPage">活动管理</a>
    					<span>&gt;</span>
    					<span>活动报名信息</span>
    				</div>
    			</h3>
    				
    		</div>
    		
    		<div class="content-main">
				<section class="content-item" data-template="item/list" id="box">
					<div class="content-item-top">
						<div class="item-toolbar">
							<span class="toolbar-title">${title}</span>
							<div class="toolbar-info" id="toolbar-info">
							</div>
						</div> 
						<form action="/Manager/web/signup/apply/listsearch" method="get" autocomplete="off">
							
							<div class="filter-item">
								<label for="">时间</label>
								<input type="text" class="text text-100" placeholder="开始时间" name="sdate" date-range/>
								<span>至</span>
								<input type="text" class="text text-100" placeholder="结束时间"  name="edate" date-range/>
							</div>
                            <div class="filter-item">
								<label for="">支付状态</label>
								<select name="paystatus" class="select">
									<option value="">所有</option>
									<option value="2">已付款</option>
									<option value="1">未付款</option>
								</select>
							</div>
							<div class="filter-item">
								<input type="hidden" name="page" value="1"/>
								<input type="hidden" name="actionId"   value="${id}"/>
							</div>
							<div class="filter-item">
								<label for="">搜索</label>
								<input type="search" class="text text-150" name="sw" placeholder="输入关键字" id="search-input"/>
								<input type="submit" class="btn btn-search"  value="搜索" id="search-button"/>
							    <a data-href="/Manager/web/signup/apply/exportExcel?" id="exportBtn" target="_blank" class="btn btn-default">导出数据</a>
							</div>
						</form>
					</div>
					
					<div class="content-item-block">
							<table class="table">
								<thead>
								<tr>
									<th style="width:10%">报名序号</th>
									<th style="width:15%">报名时间</th>
									<th style="width:12%">用户</th>
									<th style="width:15%">订单号</th>
									<th style="width:18%">状态</th>
									<th style="width:10%"  class="align-right">支付金额(<span class="rmb">&yen;</span>)</th>
									<th style="width:10%" class="align-center">操作</th>
								</tr>
								</thead>
								<tbody id="sortable">
									<tr>
										<td class="align-center" colspan="7">
											<div class="loading">加载中...</div>
										</td>
									</tr>
								</tbody>
							</table>
					</div>
					
				</section>
    		</div>
    	</div>
    </section>
    
   <script type="text/template"  id="item/list" note="订单列表">
		{{if  !code }}
			<tr><td colspan="7" class="color-red">查询错误！</td></tr>
        {{else if code!=200}}
			<tr><td colspan="7" class="color-red">{{msg || '查询错误！'}}</td></tr>
        {{else if !data.datalist || data.datalist.length==0}}
			<tr><td colspan="7">没有记录！</td></tr>
		{{else}}
			{{each data.datalist as item}}
				<tr>
					<td>
						<p>{{item.id}}</p>
					</td>
					<td>
						<p>{{item.apply_time | dateFormat:'yyyy-MM-dd HH:mm'}} </p>
					</td>
					<td><p>{{item.phone}}</td>
					<td>
						<p>
							{{item.order_id}}
						</p>
						<p class="value-note">
							交易号：{{item.trade_id}}
						</p>
					</td>
					<td>
                          {{if item.status == 2}}
 							<span>已支付</span>
							{{ if item.issign == 1}}
							 , 已到场
					        {{/if}}
                            {{ if item.issign == 0}}
							  ,未到场
					        {{/if}}
                          {{/if}} 
						  {{if item.status == 1}}
 							<span class="color-red">未付款</span>
                          {{/if}}
						  {{if item.status == -1}}
 							<span>已退款</span>
                          {{/if}}
						  {{if item.status == -1 || item.status ===2}}
 							<p class="value-note">付款时间：{{item.pay_time | dateFormat:'yyyy-MM-dd HH:mm:ss'}}</p>
							<a href="javascript:;" data-action="order.refund" data-params="{{item | toJSON}}" class="action-link">退款</a>
                          {{/if}}
                    </td>
                    
                    <td class="align-right"><b class="rmb">{{item.pay}}</b></td>
					<td class="align-center">
						<a href="javascript:;" data-action="item.detail" data-params="{{item | itemMatch:data.headlist | toJSON}}" class="action-link">查看报名信息</a>
					</td>
				</tr>
			{{/each}}
		{{/if}}
    </script>
    
   <script type="text/template"  id="item/attrList" note="报名项目信息">
		<ul class="attr-list">
			{{each list as item}}
				<li>{{item.name}}:{{item.value}}</li>
			{{/each}}
		</ul>
   </script>
    
   <script type="text/html"  id="action/info" note="统计信息">
		{{if data}}
		<dl class="action-fields">
			<dt>报名字段：</dt>
			{{each data.headlist}}
			<dd>{{$value.title}} {{if $index!==data.headlist.length-1}}，{{/if}}</dd>
			{{/each}}
		</dl>
		<dl class="action-fields">
		<dt>报名统计：</dt>
		<dd>报名总数：<b>{{data.signcount}}</b> ,</dd>
		<dd>已付款：<b class="color-green">{{data.paycount}}</b> ,</dd>
		<dd>未付款：<b class="color-red">{{data.notpaycount}}</b> ,</dd>
		<dd>已扫码：<b class="color-blue">{{data.scanningcount}}</b></dd>
		</dl>
		{{else}}{{msg || '查询出错'}}
		{{/if}}
   </script>
   
  <script type="text/template" id="item/detail" title="报名信息">
    <style>
	    .form-block-detail .row-label {
	        color: #828282;
	    }
		.form-block-detail .form-row {
		    margin: 5px 0;
		}
    </style>
  	<div class="form-block form-block-detail form-theme2">
		{{each $data as item}}
			<div class="form-row">
				<span class="row-label">{{item.name}}：</span>
				<div class="row-content">
					<p class="row-value">{{item.value}}</p>
				</div>
			</div>
		{{/each}}
  	</div>
   </script>
   
  <script type="text/template" id="order/refund" title="订单退款">
    <style>
    </style>
    <form action="/Manager/web/pingpp/refund" method="post">
	  	<div class="form-block form-block-refund">
			<div class="form-row">
				<span class="row-label">订单号：</span>
				<div class="row-content">
					<p class="row-value">{{order_id}}</p>
				</div>
			</div>
			<div class="form-row">
				<span class="row-label">退款金额：</span>
				<div class="row-content">
					<p class="value-note"><b class="rmb">{{pay}}</b>元</p>
				</div>
			</div>
			<div class="form-row form-theme2">
				<div class="row-content">
					<textarea name="description" class="textarea" iname="退款描述" placeholder="请输入退款描述" style="height:100px;width:100%;"></textarea>
				</div>
			</div>
	  	</div>
	  	<input type="hidden" value="{{id}}" name="applyId"/>
    </form>
   </script>
   
   <script src="/pages/assets/js/require.all.js"></script>
   <script>
        requirejs([
            'artTemplate', 
            'artDialog',
            'jquery.daterangepicker', 
            'jquery.ajaxsubmit',
            'jquery.formcheck',
            'jquery.common',
            'jquery.pager'
        ], 
        function(template, dialog){
   			
        	
			template.helper('itemMatch',function(item, headers){
				var list=[];
				$.each(headers, function(i, data){
					list.push({
						name:data.title,
						value:item['item0'+i]
					})
				})
				return list;
			})
			
			template.helper('renderAttrList',function(list){
				return template('item/attrList',{list:list})
			})
        	
    		var App={
    				
    			alert : function(){
    				alert(arguments[0]);
    			},
    			
    			showDetail : function(data){
    				var id="item/detail";
    				var title=document.getElementById(id).title || '提示';
    				var content=template(id, data);
					var idialog=dialog({
						id : id,
						zIndex: 5,width:350,
						padding:"0 20px",
						title:title,
						content:content
					})
					idialog.showModal();
    			},
    			
    			showRefund : function(data){
    				var app = this;
    				var id="order/refund";
    				var title=document.getElementById(id).title;
					var content=template(id, data);
					var idialog=dialog({
						id : id,
						title:title,
						zIndex: 5,width:420,
						padding:"0 20px",
						content:content,
						onshow:function(){
							//解决当表单中只有一个input:text时按回车自动提交form的问题
							this.getContent().find("form").on("submit",function(e){
								e.preventDefault();
								return false;
							});
						},
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"确定退款",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									$form.ajaxSubmit({
										checkForm:function(){
											return $(this).checkForm({
												onFail:function(e){
													alert(e);
													e.target.focus();
												}
											})
										},
										onSuccess :function(result){
											var code=result.code;
											if(code==200){
												idialog.remove();
												app.reloadItems();
											}
											else{
												var msg=result.msg || "提交失败！";
												app.alert(msg);
											}
										}
									})
									return false;
								}
							}
						]
					}).showModal();
    			},
    			
    			initDatePicker:function(){
    				var $dates=$("[date-range]").dateRangePicker({
						separator : '至',
						getValue: function(){
							return '';
						},
						setValue: function(s,s1,s2){
							return false;
						}
					})
					.on("datepicker-apply",function(e,date){
						$dates.eq(0).val(date.date1.format('yyyy-MM-dd'));
						$dates.eq(1).val(date.date2.format('yyyy-MM-dd'));
						$(this).parents("form:first").submit()
					})
    			},
    			
    			initEvents:function(){
					var app = this;
					$("body").on("click", "[data-action]", function(){
						var $this=$(this);
						var action=$this.data("action");
						var data=$this.data("params");
						if(action==='item.detail'){
							app.showDetail(data);
						}
						if(action==='order.refund'){
							app.showRefund(data);
						}
						return false;
					})
    			},
    			
    			showStatistics : function(data){
    				var html = template('action/info', data)
    				$('#toolbar-info').html(html);
    			},
    			
    			init : function(){
    				var app = this;
					
					this.initDatePicker();
					
					$("[data-template]").ajaxLoad({
						beforeSubmit:function(){
							var $extBtn=$("#exportBtn");
							var href=$extBtn.data('href');
							var params=$(this).find("form").serialize();
							$extBtn.attr('href',href+params);
						},
						dataFilter:function(res){
							app.showStatistics(res);
							return res;
						}
					});
					
					this.initEvents();
    			}
    		}
    		
    		App.init();
   		
        })
   </script>
    </body>
</html>